<template>
	<view class="body">
		<u-form :model="form" ref="uForm">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="phone-fill" prop="phoneNumber">
				<u-input :disabled="true" v-model="form.phoneNumber" placeholder="手机号(必填)"/>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="more-circle-fill" >
				<u-input v-model="form.code" placeholder="验证码"/>
				<u-button @click="countTime()" size="mini" ripple slot="right" :disabled="codebtn.disable" :type="codebtn.type">{{codebtn.tips}}</u-button>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="lock-fill"    prop="newPassword">
				<u-input v-model="form.newPassword" type="password" placeholder="请输入新密码"/>
			</u-form-item>

		</u-form>
		<view style="margin-top: 20px;" >
			<u-button shape="circle" type="success"  @click="submit">确认重置</u-button>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				code:'',
				newPassword:'',
				phoneNumber:'',
				weChatOpenId:uni.getStorageSync('openid')
			},
			codebtn:{
				disable:false,
				tips:'获取验证码',
				type:'success'
			},
			countTimeInfo: {
				receiver: '',
				templateParas: '',
			},
			countTimeNum:30,
			rules: {
				newPassword: [
					{
						min: 6,
						required: true, 
						message: '密码不能少于6个字符;', 
						trigger: 'change'
					}
				],
				phoneNumber: [
					{ 
						required: true, 
						message: '请输入手机号', 
						trigger: ['blur'],
					}
				],
			}
		};
	},
	onLoad(obj) {
		this.form.phoneNumber=obj.phone
	},
	methods: {
		countTime(){
			if(this.form.phoneNumber.length!=11){
				uni.showToast({
					title:'请输入正确手机号'
				})
				return
			}
			this.countTimeInfo.templateParas=Math.random().toString().slice(-6);
			this.countTimeInfo.receiver=this.form.phoneNumber;
			var requestUrl = '/api/services/tms/U8App/SendSmsAsync';
			var inputData = this.countTimeInfo;
			var loadTitle = '正在发送...';
			this.$axios.post(requestUrl,inputData,loadTitle,p=>{
				if(p.success){
					this.codebtn.tips='倒计时'+this.countTimeNum+'s';
					this.codebtn.type='default';
					this.codebtn.disable=true;
					this.timer=setInterval(()=>{
						this.countTimeNum--;
						this.codebtn.tips='倒计时'+this.countTimeNum+'s';
						if(this.countTimeNum==0){
							this.codebtn.type='success';
							this.codebtn.disable=false;
							this.codebtn.tips='重新获取验证码'
							clearInterval(this.timer)
						}
					},1000)
				}
			})
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if(this.form.code==''){
						uni.showToast({
							title:'请输入验证码'
						})
						return
					}
					if(this.form.code!=this.countTimeInfo.templateParas){
						uni.showToast({
							title:'验证码无效'
						})
						return
					}
					var requestUrl = '/api/services/tms/Account/ReSetPasswordAsync';
					var inputData = this.form;
					var loadTitle = '正在修改...';
					this.$axios.post(requestUrl,inputData,loadTitle,p=>{
						if(p.success){
							uni.showToast({
								title:'密码修改成功',
								icon:'success'
							})
							setTimeout(()=>{
								uni.navigateBack()
							}, 2000);
						}
					})
				} else {
					uni.showToast({
						title:'请输入新密码'
					})
				}
			});
		},

	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>
<style lang="scss">
	.body{
		padding:0 40rpx;
	}
	
</style>